<template>
  <base-page-view class-name="my-box-page">
    <b-image class-name="banner" src="/static/images/box/banner.png" mode="aspectFill" :is-asset="true" />
    <template v-if="pageLoaded">
      <view class="header" @click="$navigateTo('/pagesBox/inventory/index')">
        <view>{{ box.total_stock_number_msg }}</view>
        <!-- <view>总库存(<view class="num">{{ box.stock_number }}箱</view>)</view>
        <image class="icon" src="/static/images/common/icon_rule.png" mode="aspectFit" @click.stop="showRule('inventory')" /> -->
        <image class="icon icon-right" src="/static/images/icon/icon_arror_right_grey.png" mode="aspectFit" />
      </view>
      <view class="block">
        <view class="block-title">
          <view>我的云仓申购</view>
          <view class="sub-item">
            <image class="icon" src="/static/images/common/icon_rule.png" mode="aspectFit" @click.stop="showRule('purchase')" />
          </view>
          <view class="view-more" @click="$navigateTo('/pagesBox/purchase/index?tab=0')">
            <view>查看全部</view>
            <image class="icon" src="/static/images/icon/icon_arror_right_grey.png" mode="aspectFit" />
          </view>
        </view>
        <view class="block-content">
          <!-- 最高董事 -->
          <template v-if="box.top_director_apply_number_vo.flag">
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=1')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_pay.png" mode="aspectFit" :is-asset="true" />
              <view>待付款(<view class="num">{{ formatNumber(box.top_director_apply_number_vo.paying_number) }}</view>)</view>
            </view>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=2')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_revoke.png" mode="aspectFit" :is-asset="true" />
              <view>已取消(<view class="num">{{ formatNumber(box.top_director_apply_number_vo.cancel_number) }}</view>)</view>
            </view>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=3')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_adopt.png" mode="aspectFit" :is-asset="true" />
              <view>已完成(<view class="num">{{ formatNumber(box.top_director_apply_number_vo.completed_number) }}</view>)</view>
            </view>
          </template>
          <!-- 中间/终端用户 -->
          <template v-else>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=1')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_approval.png" mode="aspectFit" :is-asset="true" />
              <view>待审批(<view class="num">{{ formatNumber(box.apply_number_vo.applying_number) }}</view>)</view>
            </view>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=2')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_adopt.png" mode="aspectFit" :is-asset="true" />
              <view>申购通过(<view class="num">{{ formatNumber(box.apply_number_vo.apply_approved_number) }}</view>)</view>
            </view>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=3')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_reject.png" mode="aspectFit" :is-asset="true" />
              <view>申购驳回(<view class="num">{{ formatNumber(box.apply_number_vo.apply_rejective_number) }}</view>)</view>
            </view>
            <view class="content-item" @click="$navigateTo('/pagesBox/purchase/index?tab=4')">
              <b-image class-name="image" src="/static/images/box/icon_cloud_revoke.png" mode="aspectFit" :is-asset="true" />
              <view>已撤销(<view class="num">{{ formatNumber(box.apply_number_vo.apply_cancel_number) }}</view>)</view>
            </view>
          </template>
        </view>
      </view>
      <view v-if="box.approve_number_vo.flag" class="block">
        <view class="block-title">
          <view>我的审批</view>
          <view class="sub-item">
            <image class="icon" src="/static/images/common/icon_rule.png" mode="aspectFit" @click.stop="showRule('approval')" />
          </view>
          <view class="view-more" @click="$navigateTo('/pagesBox/approval/index?tab=0')">
            <view>查看全部</view>
            <image class="icon" src="/static/images/icon/icon_arror_right_grey.png" mode="aspectFit" />
          </view>
        </view>
        <view class="block-content size-small">
          <view class="content-item" @click="$navigateTo('/pagesBox/approval/index?tab=1')">
            <b-image class-name="image" src="/static/images/box/icon_approval_be.png" mode="aspectFit" :is-asset="true" />
            <view>待审批(<view class="num">{{ formatNumber(box.approve_number_vo.approving_number) }}</view>)</view>
          </view>
          <view class="content-item" @click="$navigateTo('/pagesBox/approval/index?tab=2')">
            <b-image class-name="image" src="/static/images/box/icon_approval_complete.png" mode="aspectFit" :is-asset="true" />
            <view>审批通过(<view class="num">{{ formatNumber(box.approve_number_vo.approved_number) }}</view>)</view>
          </view>
          <view class="content-item" @click="$navigateTo('/pagesBox/approval/index?tab=3')">
            <b-image class-name="image" src="/static/images/box/icon_approval_reject.png" mode="aspectFit" :is-asset="true" />
            <view>审批驳回(<view class="num">{{ formatNumber(box.approve_number_vo.approve_rejective_number) }}</view>)</view>
          </view>
        </view>
      </view>
      <view class="block">
        <view class="block-title">
          <view>提货订单</view>
          <view class="sub-item">
            <image class="icon" src="/static/images/common/icon_rule.png" mode="aspectFit" @click.stop="showRule('order')" />
          </view>
          <view class="view-more" @click="$navigateTo('/pagesOrder/order/index?type=0&from=box')">
            <view>查看全部</view>
            <image class="icon" src="/static/images/icon/icon_arror_right_grey.png" mode="aspectFit" />
          </view>
        </view>
        <view class="block-content size-small">
          <view class="content-item" @click="$navigateTo('/pagesOrder/order/index?type=1&from=box')">
            <b-image class-name="image" src="/static/images/box/icon_order_pay.png" mode="aspectFit" :is-asset="true" />
            <view>待付款(<view class="num">{{ formatNumber(box.take_order_number_vo.take_order_paying_number) }}</view>)</view>
          </view>
          <view class="content-item" @click="$navigateTo('/pagesOrder/order/index?type=2&from=box')">
            <b-image class-name="image" src="/static/images/box/icon_order_deliver.png" mode="aspectFit" :is-asset="true" />
            <view>待发货(<view class="num">{{ formatNumber(box.take_order_number_vo.take_order_sending_number) }}</view>)</view>
          </view>
          <view class="content-item" @click="$navigateTo('/pagesOrder/order/index?type=3&from=box')">
            <b-image class-name="image" src="/static/images/box/icon_order_receive.png" mode="aspectFit" :is-asset="true" />
            <view>待收货(<view class="num">{{ formatNumber(box.take_order_number_vo.take_order_receiving_number) }}</view>)</view>
          </view>
          <view class="content-item" @click="$navigateTo('/pagesOrder/order/index?type=44&from=box')">
            <b-image class-name="image" src="/static/images/box/icon_order_complete.png" mode="aspectFit" :is-asset="true" />
            <view>已完成(<view class="num">{{ formatNumber(box.take_order_number_vo.take_order_completed_number) }}</view>)</view>
          </view>
        </view>
      </view>
      <modal ref="ruleModal" :title="ruleData.title" :content="ruleData.content" />
    </template>
  </base-page-view>
</template>
<script>
import modal from '../components/modal/index'
import './index.scss'

const RULE_OBJ = {
  inventory: {
    title: '云仓库存',
    content: '在这查看您的云仓出入库情况'
  },
  purchase: {
    title: '我的云仓申购',
    content: '在这查看我发起的申购情况，并可联系您的审批人进行相应的处理',
    contentMax: '在这查看我发起的申购订单'
  },
  approval: {
    title: '我的审批',
    content: '在这审批上报的申购订单，请务必确认您线下收到了申购人的货款'
  },
  order: {
    title: '提货订单',
    content: '在这查看您的提货订单情况，支付运费后选择商品即可提货'
  }
}
export default {
  name: 'MyBox',
  components: {
    modal
  },
  data() {
    return {
      pageLoaded: false,
      createOrderPermission: false,
      ruleData: {
        title: '',
        content: ''
      },
      box: {
        stock_number: '',
        apply_number_vo: {},
        top_director_apply_number_vo: {},
        approve_number_vo: {},
        take_order_number_vo: {}
      }
    }
  },
  computed: {
    formatNumber: function() {
      return function(val) {
        if (val > 999) {
          return '999+'
        }
        return val
      }
    }
  },
  onLoad() {
    this.createOrderPermission = this.userInfo && this.userInfo.boxPermission && this.userInfo.boxPermission.includes(2)
    this.fetchData()
  },
  onShow() {
    if (this.pageLoaded) {
      this.fetchData(false)
    }
  },
  onPullDownRefresh() {
    this.fetchData(false)
  },
  methods: {
    async fetchData(showLoading) {
      const res = await this.$api.boxApi.getMyBoxHome({}, showLoading)
      if (res.success && res.data) {
        const { apply_number_vo, top_director_apply_number_vo, approve_number_vo, take_order_number_vo } = res.data
        this.box = {
          ...res.data,
          apply_number_vo: { flag: !!apply_number_vo, ...apply_number_vo },
          top_director_apply_number_vo: { flag: !!top_director_apply_number_vo, ...top_director_apply_number_vo },
          approve_number_vo: { flag: !!approve_number_vo, ...approve_number_vo },
          take_order_number_vo: { flag: !!take_order_number_vo, ...take_order_number_vo }
        }
      }
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 500)
      this.pageLoaded = true
    },
    showRule(type) {
      this.ruleData = RULE_OBJ[type]
      if (this.createOrderPermission && type === 'purchase') {
        this.ruleData.content = this.ruleData.contentMax
      }
      this.$refs.ruleModal.show()
    }
  }
}
</script>
